<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改事件</title>
		<style>
			table {
				width: 85%;
				border-collapse: collapse;
				/* 合并边框 */
				margin: 20px 0;
				/* 外边距 */
			}
		
			th,
			td {
				border: 1px solid #ddd;
				/* 单元格边框 */
				text-align: left;
				/* 文本左对齐 */
				padding: 8px;
				/* 内边距 */
			}
		
			th {
				background-color: #f2f2f2;
				/* 表头背景色 */
				font-weight: bold;
				/* 字体加粗 */
			}
		
			tr:nth-child(even) {
				background-color: #f9f9f9;
			}
		
			/* 偶数行背景色 */
		
			tr:hover {
				background-color: #f1f1f1;
			}
		
			/* 鼠标悬停行背景色 */
		
			fieldset {
				border: 1px solid #ddd;
				/* 字段集边框 */
				padding: 20px;
				/* 内边距 */
				margin: 20px 0;
				/* 外边距 */
			}
		
			legend {
				padding: 0 10px;
				/* 内边距 */
				font-weight: bold;
				/* 字体加粗 */
			}
		
			input[type="text"],
			select {
				padding: 5px;
				/* 内边距 */
				margin: 5px 0;
				/* 外边距 */
				border: 1px solid #ddd;
				/* 边框 */
				border-radius: 4px;
				/* 圆角边框 */
			}
		
			input[type="button"] {
				padding: 5px 15px;
				/* 内边距 */
				margin: 5px 0;
				/* 外边距 */
				border: none;
				/* 无边框 */
				background-color: #007bff;
				/* 按钮背景色 */
				color: white;
				/* 文字颜色 */
				border-radius: 4px;
				/* 圆角边框 */
				cursor: pointer;
				/* 鼠标悬停时显示指针 */
			}
		
			input[type="button"]:hover {
				background-color: #0056b3;
				/* 鼠标悬停时按钮背景色 */
			}
		
			a {
				color: #007bff;
				/* 链接文字颜色 */
				text-decoration: none;
				/* 去除下划线 */
				font-weight: bold;
				/* 字体加粗 */
				transition: color 0.3s;
				/* 颜色变化过渡效果 */
			}
		
			a:hover {
				color: #0056b3;
				/* 鼠标悬停时链接文字颜色 */
				text-decoration: underline;
				/* 鼠标悬停时添加下划线 */
			}
		</style>
		<script type="text/javascript" src="../js/common.js"></script>
		<script>
			window.onload = function() {
				//获取get请求参数
				const params = getUrlParams();
				const token = sessionStorage.getItem('authToken'); // 从sessionStorage获取token
				fetch("http://localhost:8080/management/search?id=" + params.id)
					.then((response) => response.json())
					.then((data) => {
						if (data.code === 1) {
							//填充初始数据
							const event = data.data;
							document.getElementById("eventType").value = event.categoryId;
							document.getElementById("eventTitle").value = event.title;
							document.getElementById("eventStart").value = event.startDate;
							document.getElementById("eventEnd").value = event.endDate;
							document.getElementById("eventDescription").value = event.description;
							//处理下拉框
							const eventLevelSelect = document.getElementById("eventLevel");
							// 设置新的默认选中项
							for (var i = 0; i < eventLevelSelect.options.length; i++) {
								if (eventLevelSelect.options[i].value === event.level) {
									eventLevelSelect.options[i].selected = true;
									break;
								}
							}
							const eventStatusSelect = document.getElementById("eventStatus");
							// 设置新的默认选中项
							for (var i = 0; i < eventStatusSelect.options.length; i++) {
								if (eventStatusSelect.options[i].value === event.status) {
									eventStatusSelect.options[i].selected = true;
									break;
								}
							}
						} else {
							alert(data.message);
						}
					})
					.catch((e) => console.log('error', e));

				fetch("http://localhost:8080/category/list", {
						method: 'GET',
						headers: {
							'Authorization': token, // 在请求头中包含token
						},
					})
					.then((response) => response.json())
					.then((data) => {
						const eventTypeSelect = document.getElementById("eventType");
						eventTypeSelect.innerHTML = ''; // 清空下拉框
						data.data.forEach((type) => {
							const option = document.createElement("option");
							option.value = type.id; // 设置option的value为type.id
							option.textContent = type.categoryName; // 设置option的文本内容为type.name
							eventTypeSelect.appendChild(option);
						});
						// 设置新的默认选中项
						// const params = getUrlParams();
						const cateId = params.categoryid;
						for (var i = 0; i < eventTypeSelect.options.length; i++) {
							if (eventTypeSelect.options[i].value === cateId) {
								eventTypeSelect.options[i].selected = true;
								break;
							}
						}
					})
					.catch((e) => console.log('error', e));
			}

			function update() {
				// 获取用户输入的值
				const categoryid = document.getElementById("eventType").value;
				const title = document.getElementById("eventTitle").value;
				const description = document.getElementById("eventDescription").value;
				const level = document.getElementById("eventLevel").value;
				const status = document.getElementById("eventStatus").value;
				//格式化时间
				const inputTime1 = document.getElementById("eventStart").value;
				const startDate = formatTime(inputTime1);
				const inputTime2 = document.getElementById("eventEnd").value;
				const endDate = formatTime(inputTime2);
				const params = getUrlParams();
				const eventId = params.id;

				// 发送异步请求
				const event = {
					id: eventId,
					categoryId: categoryid,
					title: title,
					startDate: startDate,
					endDate: endDate,
					description: description,
					level: level,
					status: status,
				};
				fetch("http://localhost:8080/management/update", {
						method: 'PUT',
						headers: {
							'Content-Type': 'application/json', // 设置请求头的Content-Type
						},
						body: JSON.stringify(event) // 将对象转换为JSON字符串
					})
					.then((response) => response.json()) // 将响应体中的JSON数据解析为JS对象
					.then((data) => {
						// 弹出message
						if (data.code === 1) {
							// 更新成功后跳转到eventControl.html页面
							window.location.href = "eventControl.html";
						} else {
							alert(data.message);
						}
					})
					.catch((e) => console.log('error', e));
			}

			function formatTime(time) {
				const [date, timePart] = time.split('T');
				return `${date} ${timePart}`;
			}
		</script>
	</head>
	<body>

		<fieldset>
			<legend>修改事件</legend>
			事件类型名称:
			<select id="eventType">
				<option value="">请选择事件类型</option>
			</select><br />
			事件标题:<input type="text" id="eventTitle" /><br />
			事件开始日期:<input type="datetime-local" id="eventStart" /><br />
			事件截止日期:<input type="datetime-local" id="eventEnd" /><br />
			事件描述:<input type="text" id="eventDescription" /><br />
			事件级别:
			<select id="eventLevel">
				<option value="重要">重要</option>
				<option value="紧急">紧急</option>
				<option value="一般">一般</option>
			</select><br />
			是否完成:
			<select id="eventStatus">
				<option value="未完成">未完成</option>
				<option value="已完成">已完成</option>
				<option value="作废">作废</option>
			</select><br />
			<input type="button" onclick="update()" value="修改事件" />
		</fieldset>
	</body>
</html>